<!--
 * @Description: 
 * @Author: zzj
 * @Date: 2021-09-26 17:29:15
 * @LastEditors: zzj
 * @LastEditTime: 2021-09-26 20:05:01
-->
<template>
	<div class="article">
		文章管理
		<div>
			{{article}}
			<form v-on:submit.prevent="submitHandler"
			:v-model="article">
				题目：<input type="text" v-model="article.title">
				作者id：<input type="text" v-model="article.authorId">
				<input type="submit">
			</form>

			<table style="width:100%">
				<thead>
					<tr>
						<td>编号</td>
						<td>题目</td>
						<td>作者id</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in articles" v-bind:key="item.id">
						<td >{{index+1}}</td>
						<td>{{item.title}}</td>
						<td>{{item.authorId}}</td>
						<td>
							<a href="" v-on:click.prevent="delHandler(item)">删除 </a>
							<a href="" v-on:click.prevent="editHandler(item)">修改 </a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</template>
<script>
import {get,post} from "../utils/request";
export default {
	data() {
		return {
			articles:[],
			article:{}
		}
	},
	methods:{
		//修改
		editHandler(row){
			this.article = Object.assign({},row);
		},

		//提交
		submitHandler(){
			let url = "/article/saveOrUpdate"
			post(url,this.article).then(resp =>{
				alert(resp.message);
				this.article = {};
				this.loadArticles();
			})
		},

		//删除
		delHandler({id}){
			let url = "/article/deleteById "
			get(url,{id}).then(resp =>{
				alert(resp.message);
				this.loadArticles();
			})
		},

		//查询
		loadArticles(){
			let url = "/article/findAll"
			get(url).then(resp => {
				this.articles = resp.data;
			})
		}
	},
	mounted(){
		this.loadArticles();
	}
}
</script>